<template>
  <div class="container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="Name" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="IsStudent">
        <el-switch v-model="ruleForm.isStudent"></el-switch>
      </el-form-item>
      <el-form-item label="CreateTime" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="ruleForm.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-time-picker
              placeholder="选择时间"
              v-model="ruleForm.date2"
              style="width: 100%"
            ></el-time-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="Hobby" prop="hobby">
        <el-input type="textarea" v-model="ruleForm.hobby"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    person: {
      type: [],
    },
  },
  data() {
    return {
      ruleForm: {
        name: "", //姓名
        date1: "", //创建时间
        date2: "",
        isStudent: false, //是否为学生
        hobby: "", //hobby
      },
      rules: {
        name: [
          { required: true, message: "请输入你的姓名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        hobby: [{ required: true, message: "请填写你的爱好", trigger: "blur" }],
      },
    };
  },
  methods: {
    dataFormat1(originVal) {
      const dt = new Date(originVal);
      const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDay() + "").padStart(2, "0");
      return `${y}-${m}-${d} `;
    },
    dataFormat2(originVal) {
      const dt = new Date(originVal);
      const hh = (dt.getHours() + "").padStart(2, "0");
      const mm = (dt.getMinutes() + "").padStart(2, "0");
      const ss = (dt.getSeconds() + "").padStart(2, "0");
      return `${hh}:${mm}:${ss}`;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let createTime = this.dataFormat1(this.ruleForm.date1)+this.dataFormat2(this.ruleForm.date2)
          this.person.push({
            id: this.person.length? this.person[this.person.length - 1].id + 1 : 1,
            name: this.ruleForm.name,
            isStudent: this.ruleForm.isStudent,
            hobby: this.ruleForm.hobby,
            createTime: createTime,
          });
          console.log(this.person);
          this.$emit("update:person", this.person);
          this.$message({type:'success',message:'ADD SUCCESS', center: true});
          this.resetForm(formName)

        } else {
          this.$message({type:'error',message:'As what you required!!!', center: true});
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
   
  },
};
</script>

<style>
.container {
  width: 500px;
  margin: auto;
}
</style>